<template>
  <div>
    <van-nav-bar title="详情" left-arrow @click-left="$router.back()" />
    <img :src="detail.url" alt="" width="100%" />
    <h1>{{ detail.title }}</h1>
    <p>{{ detail.title }}</p>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服"/>
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="tatalCount" @click="$router.push({ name: 'car' })"/>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCar"/>
    </van-goods-action>
  </div>
</template>

<script>
export default {
  name: "detail",
  computed: {
    detail() {
      return this.$store.state.detail;
    },
    tatalCount() {
      console.log(this.$store.getters.tatalCount);
      return this.$store.getters.tatalCount
    }
  },
  methods: {
    addCar() {
      this.$store.commit('ADD_LOCALCAR', this.detail)
    }
  },
  created() {
    const { id } = this.$route.params;
    this.$store.dispatch("GET_DETAIL", { id });
    console.log(1);
  }
};
</script>